<template>
	<div
		v-click-outside="onClickOutSide"
		style="position: relative;"
		@click="onClick"
		@mouseenter="onMouseEnter"
		@mouseleave="onMouseLeave"
	>
		<div ref="jkToolCont">
			<slot></slot>
		</div>
		<!--气泡展示-->
		<transition name="fade">
			<div
				v-show="show"
				ref="tContainer"
				class="tooltip-container"
				:style="{top: `${positionY}px`, left: `${positionX}px`, background: effect === 'light' ? '#fff' : 'rgba(70,76,91,.9)', color: effect === 'light' ? '#808695' : '#fff'}"
			>
				<span v-if="title" class="tooltip-title">{{ title }}</span>
				<div style="line-height: normal;padding-top: 10px;">
					<slot name="content"></slot>
				</div>
			</div>
		</transition>
	</div>
</template>
<script>

    import clickOutside from 'element-ui/src/utils/clickoutside';

    export default {
        directives: { clickOutside },
        props: {
            title: {
                type: String,
                default: ''
            },
            trigger: {
                type: String,
                default: 'hover'
            },
            effect: {
                type: String,
                default: 'light' // dark light
            },
            state: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                show: false,
                positionX: 1,
                positionY: 1,
                clientX: 0,
                clientY: 0
            };
        },
        methods: {
            onClickOutSide() {
                // console.log(1111);
                this.show = false;
            },
            onClick(e) {
                if (this.trigger === 'click') {
                    this.show = !this.show;
                }
                this.calLocation(e);
            },
            onMouseEnter(e) {
                if (this.trigger !== 'hover' || this.show) {
                    return;
                }
                this.calLocation(e);
            },
            calLocation(e) {
                this.show = true;
                this.$nextTick(() => {
                    if (this.$refs.tContainer || this.$refs.tContainer !== undefined) {
                        // 判断是否超出浏览器可视区右侧
                        if ((this.$refs.tContainer.clientWidth + this.getElementViewLeft(this.$refs.jkToolCont)) > e.view.innerWidth) {
                            this.positionX = `-${(this.$refs.tContainer.clientWidth + this.getElementViewLeft(this.$refs.jkToolCont)) - e.view.innerWidth}`;
                        } else {
                            this.positionX = 0;
                        }

                        // 判断是否超出浏览器可视区底部
                        if ((this.$refs.tContainer.clientHeight + this.getElementViewTop(this.$refs.jkToolCont)) > e.view.innerHeight) {
                            this.positionY = `-${this.$refs.tContainer.offsetHeight}`;
                        } else {
                            this.positionY = this.$refs.jkToolCont.offsetHeight;
                        }
                    }
                });
            },
            getElementViewLeft(element) {
                let actualLeft = element.offsetLeft;
                let current = element.offsetParent;

                while (current !== null) {
                    actualLeft += current.offsetLeft;
                    current = current.offsetParent;
                }

                let elementScrollLeft = 0;
                if (document.compatMode === 'BackCompat') {
                    elementScrollLeft = document.body.scrollLeft;
                } else {
                    elementScrollLeft = document.documentElement.scrollLeft;
                }

                return actualLeft - elementScrollLeft;
            },
            getElementViewTop(element) {
                let actualTop = element.offsetTop;
                let current = element.offsetParent;

                while (current !== null) {
                    actualTop += current.offsetTop;
                    current = current.offsetParent;
                }
                let elementScrollTop = 0;
                if (document.compatMode === 'BackCompat') {
                    elementScrollTop = document.body.scrollTop;
                } else {
                    elementScrollTop = document.documentElement.scrollTop;
                }

                return actualTop - elementScrollTop;
            },
            onMouseLeave() {
                if (this.trigger === 'hover') {
                    this.show = false;
                }
            }
        },
        mounted() {
            this.show = false;
        },
        watch: {
            state(e) {
                this.show = e;
            },
            show(newVal) {
                this.$emit('update:state', newVal);
                if (newVal) {
                    this.$nextTick(() => {

                    });
                }
            }
        }
    };
</script>
<style scoped lang="scss">
.tooltip-container{
    border-radius: 4px;
    padding: 0 10px 10px 10px;
    position: absolute;
    z-index: 100;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    .tooltip-title {
        height: 36px;
        line-height: 36px;
        font-size: 14px;
    }
}
.arrow {
    border-left: solid 6px transparent;
    border-right: solid 6px transparent;
    border-bottom: solid 12px red;
    position: fixed;
}
</style>
